<template>
  <div class="app-container">
    <router-view></router-view>
    <div class="notification-container">
      <NoticeList ref="noticeRef"></NoticeList>
    </div>
  </div>
</template>

<script setup>
import NoticeList from '@/components/inspia/NoticeList/index.vue'

import {useThemeStore} from "./store/theme/index.js";
import {useSystemStore} from "./store/system/index.js";
import {ref, watch} from "vue";

const themeStore = useThemeStore();
const systemStore = useSystemStore();


const noticeRef = ref(null)
watch(
    () => systemStore.systemNotification,
    (newMessage, oldMessage) => {
      noticeRef.value.addNotice({
        name: newMessage.name,
        description: newMessage.description,
        time: newMessage.time,
        icon: newMessage.icon,
        color: newMessage.color,
      })
    },
    { deep: true }
)
</script>


<style scoped>
.notification-container {
  position: absolute;
  top: 20px;
}

.app-container {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
